<template>
  <div class="footer-wrapper">
    <div class="copy-right-wrapper">
      <img
          class="logo"
          :src="logoUrl"
          :alt="$store.getters.imgAlt + 'footerLogo'"
      />
      <div class="copy-right">
        <span>作者：张津瑞</span>
        <span class="split">|</span>
        <span>邮箱：jinrui.zhang@accenture.com</span>
        <span class="split">|</span>
        <span>线上地址：<a href="http://disk.jerry-cloud.top" style="color: #ffffff;text-decoration: none" >disk.jerry-cloud.top</a></span>
        <span class="split">|</span>
        <span>前端源码地址：<a href="https://gitee.com/lnbxzjr/graduation-project---front-end.git" style="color: #ffffff;text-decoration: none" >https://gitee.com/lnbxzjr/graduation-project-web</a></span>
        <span class="split">|</span>
        <span>后端源码地址：<a href="https://gitee.com/lnbxzjr/graduation-project.git" style="color: #ffffff;text-decoration: none">https://gitee.com/lnbxzjr/graduation-project-APIs</a></span>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Footer',
  data() {
    return {
      logoUrl: require('@/assets/images/common/logo.png'),
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';

.footer-wrapper {
  margin-top: 20px;
  display: flex;

  .copy-right-wrapper {
    width: 100%;
    color: $BorderLight;
    background: linear-gradient(to right, $Primary, #66b1ff);
    padding: 16px 0 16px 5vw;
    font-size: 14px;
    color: $BorderLight;
    display: flex;
    align-items: center;

    .logo {
      width: 240px;
      display: block;
      @media screen and (max-width: 920px) {
        width: 160px;
      }
    }

    .copy-right {
      margin-left 70px
    }

    .split {
      margin: 0 8px;
    }

    .link {
      &:hover {
        text-decoration: underline;
      }
    }

    .tip-website {
      padding-top: 8px;
    }
  }

}
</style>
